<template>
  <div id="magnifier" :style="{display: $store.state.isWatching}">
    <img ref="_img" :src="currentPicUrl" :style="{transform: `translate(${moveX},${moveY})`}"
         :width="scaledImgWidth" alt="">
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Magnifier",
  computed: {
    ...mapState(['currentIndex', 'imgList', 'moveX', 'moveY', "imgSizes"]),
    currentPicUrl() {
      return this.imgList[this.currentIndex]
    },
    scaledImgWidth() {
      if (!this.imgSizes.length) return '100%'
      return this.imgSizes[this.currentIndex][0] * 7.5 + 'px'
    },
    // scaledMagSize() {
    //   if (!this.imgSizes.length) return '100%'
    //   const imgSize =  this.imgSizes[this.currentIndex];
    //   return Math.min(imgSize[0], imgSize[1]) * 5 + 'px'
    // },
  },
}
</script>

<style scoped>
  #magnifier {
    width: 800px;
    height: 800px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
    border-radius: 50%;
  }
  img {
    position: absolute;
    left: 0;
    top: 0;
  }
</style>